<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="黑马程序员.vant"
      :left-text="this.$store.state.isHome ? '' : '返回'"
      :left-arrow="!this.$store.state.isHome"
      :right-text="this.$store.state.isSearch ? '添加' : ''"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 路由占位符 -->
    <router-view />
    <!-- 底部菜单栏 -->
    <van-tabbar v-model="active" active-color="#1989fa" inactive-color="#000">
      <van-tabbar-item to="/home" name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="VIP" icon="manager-o">会员</van-tabbar-item>
      <van-tabbar-item to="/car" name="car" icon="cart-o" :badge="$store.state.carNum">购物车</van-tabbar-item>
      <van-tabbar-item to="/search" name="search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: this.$store.state.urlStr
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push('/addGoods')
    }
  }
}
</script>

<style lang="less">
.van-nav-bar {
  position: fixed !important;
  top: 0;
  height: 40px;
  width: 100%;
  line-height: 40px;
  background-color: #1989fa !important;
  .van-nav-bar__arrow,
  .van-nav-bar__text,
  .van-nav-bar__title {
    font-size: 14px;
    color: #fff !important;
    color: #fff;
  }
}

.van-tabbar {
  position: absolute;
  bottom: 0;
}

.van-tabbar-item__text {
  font-size: 14px;
}
</style>
